<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>URL编解码 - 开发者工具集合</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>开发者工具集合</h1>
        </header>
        
        <nav>
            <ul>
                <li><a href="index.html">代码格式化及压缩</a></li>
                <li><a href="datetime.html">日期时间戳转换</a></li>
                <li><a href="diff.html">代码对比工具</a></li>
                <li><a href="url.html" class="active">URL编解码</a></li>
                <li><a href="converter.html">代码转换工具</a></li>
            </ul>
        </nav>
        
        <main>
            <div class="tool-container">
                <div class="tool-header">
                    <h2>URL编解码工具</h2>
                </div>
                
                <div class="url-container">
                    <div class="url-section">
                        <h3>URL编码</h3>
                        <div class="input-group full-width">
                            <textarea id="url-encode-input" placeholder="请输入需要编码的URL..."></textarea>
                        </div>
                        <button id="url-encode-btn" class="primary-btn">编码</button>
                        <div class="result-box">
                            <textarea id="url-encode-result" readonly></textarea>
                            <button id="copy-encode-btn" class="primary-btn">复制结果</button>
                        </div>
                    </div>
                    
                    <div class="url-section">
                        <h3>URL解码</h3>
                        <div class="input-group full-width">
                            <textarea id="url-decode-input" placeholder="请输入需要解码的URL..."></textarea>
                        </div>
                        <button id="url-decode-btn" class="primary-btn">解码</button>
                        <div class="result-box">
                            <textarea id="url-decode-result" readonly></textarea>
                            <button id="copy-decode-btn" class="primary-btn">复制结果</button>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        
        <footer>
            <p>© 2025 开发者工具集合 | 本地工具，安全高效</p>
        </footer>
    </div>
    
    <script src="js/common.js"></script>
    <script src="js/url.js"></script>
</body>
</html> 